<template>
	<view>
		<u-navbar title="添加备注" :autoBack="true"></u-navbar>
		
		<view class="container">
			<view class="row">
				<label class="name">添加备注</label>
			</view>
			
			<view class="row text">
				<view>
					<u--textarea v-model="RemarksContent" placeholder="请输入内容" count ></u--textarea>
				</view>
			</view>
			
			<view class="row">
				<view>
					<label class="name">快捷标签</label>
				</view> 
				
					<view class="tag_view">
						<u-tag text="不吃辣" size="mini" class="tag_text" bgColor="#FFFFFF" color="#191970" @click="addContent1"></u-tag>
						<u-tag text="不吃葱" size="mini" class="tag_text" bgColor="#FFFFFF" color="#191970" @click="addContent2"></u-tag>
						<u-tag text="不吃蒜" size="mini" class="tag_text" bgColor="#FFFFFF" color="#191970" @click="addContent3"></u-tag>
						<u-tag text="不吃香菜" size="mini" class="tag_text" bgColor="#FFFFFF" color="#191970" @click="addContent4"></u-tag>
					</view>
	
			</view>
						
			<view>
				<button @click="test()">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				RemarksContent:'',//意见反馈的文本
				img_count:0, //已经上传的图片数量
				max_count_Picture:3,
				addImage:"../../static/user/ch6addimage.png",//静态的图片资源
				wechatNum:"",//用户留下的微信号
				srcs:[],//用户上传的图片组成的数组
			}
		},
		methods: {
			uploadPicture(){
				let that = this
				uni.chooseImage({
					count:this.max_count_Picture,
					sizeType: ['original'],
					sourceType: ['album','camera'], 
					success (res) {
						const tempFilePaths = res.tempFilePaths
						that.srcs= res.tempFilePaths
						that.img_count = res.tempFilePaths.length
					} 
				}) 
			},
			addContent1(){
				var temp = this.RemarksContent+"不吃辣"
				this.RemarksContent=temp
			},
			addContent2(){
				var temp = this.RemarksContent+"不吃葱"
				this.RemarksContent=temp
			},
			addContent3(){
				var temp = this.RemarksContent+"不吃蒜"
				this.RemarksContent=temp
			},
			addContent4(){
				var temp = this.RemarksContent+"不吃香菜"
				this.RemarksContent=temp
			}
		},
		mounted(){
			
		}
	}
</script>

<style lang="scss">
	.container{
	  background:#FFFFFF;
	  font-size:30rpx;
	  .text {
	    height: 220rpx;
	  }
	  .row{
	    border-bottom: 1px #E8E8E8 solid;
	    padding: 10rpx 30rpx;
	    .name {
	      width:80%;
	      height: 80rpx;
	      line-height: 80rpx;
	    }
	    .input {
	      width:100%;
	      height:170rpx;
	      font-size:28rpx;
	      padding-top:10rpx;
	    }
	    .word-count {
	      float:right;
	      color: #808080;
	    }
	    .img-count {
	      float:right;
	      line-height: 80rpx;
	      color: #808080;
	    }
	    .add-img {
	      width:160rpx;
	      height:160rpx;
	    }
	    .img {
	      width:132rpx;
	      height:132rpx;
	      margin-bottom:14rpx;
	      margin-right: 20rpx;
	    }
	    .wechat-input{
	      font-size:28rpx;
	    }
	  }
	}  
	button {
	  margin:40rpx auto;
	  width:90%;
	  border-radius: 10rpx;
	  background:#00C760;
	  font-size:32rpx;
	  color:#FFFFFF;
	  font-weight:bold;
	}
	.tag_text{
		margin-left: 40rpx;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		display: flex;
		width: 120rpx;
		font-size: 30;
	}

	.tag_view{
		display: flex;
		flex-direction: row;  
		
	}

</style>
